<!--
 * @name: 
 * @Author: 刘大可
 * @Date: 2025-01-06 23:40:16
 * @LastEditors: 刘大可
 * @LastEditTime: 2025-01-14 00:17:40
-->
<template>
  <div class="dake-goods goods-item " :class="item.type||''"
    @click="item.type!='info'?middle.go('/pages/goods_details/index?id=' + item.id):middle.go('/')">
    <image class="cover" :src="item.image" mode="aspectFill" />
    <view class="info" v-if="item.remainingTime">
      年龄:{{ item.tips }} 出发地:{{ item.address }} 活动时间 :{{ item.remainingTime }}天
    </view>
    <view class="zn row" v-if="item.type == 'info' && earlyBirdOverTime >0">
      <view class="le row">
        <view class="btns row">早早鸟</view>
        ￥{{ item.discountAmount }} /人

        <!-- {{ middle.getDayS(item.earlyBirdEndTime,12)}} -->
      </view>
      <view class="rt row">
        <view class="key">剩余</view>
        <view class="num"> {{ remainingTime .w}} </view>周
        <view class="num"> {{ remainingTime.d }} </view>天
        <view class="num">{{remainingTime.h}} </view>时
        <view class="num">{{ remainingTime .i}} </view>分
        <view class="num">{{ remainingTime .s}} </view>秒
      </view>
    </view>
    <view class="main_info" v-if="item.type != 'info'">
      <view class="row" v-if="item.type=='info'">
        <view class="price ">
          ￥{{ item.price }}/人
        </view>
      </view>
      <view class="title">
        {{ item.storeName }}
      </view>
      <view class="row" v-if="item.type!='info'">
        <view class="price ">
          ￥{{ item.price }}/人
        </view>
        <view class="btn row rt">查看全部</view>
      </view>
      <view v-else>
        <view class="remark">
          {{ item.storeInfo }}
        </view>
      </view>
    </view>

  </div>
</template>

<script>
export default {
  name: "dake-goods",
  props: {
    item:{
      type:Object,
      default:{
        
      }
    },
    type:{
      type:Number,
      default:1
    }, earlyBirdOverTime:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      remainingTime:{}
    }
  },
  computed: {},
  methods: {
    downTime(){
      this.remainingTime = this.middle.getDayS(this.middle.time()*1000,'a',this.item.earlyBirdEndTime*  1000,12)
      console.log(this.remainingTime);
      
      this.middle.downTime(1000).then(res=>{
       
        this.downTime()
      })
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    console.log(this.item.earlyBirdEndTime);
    
    if (this.item.type == 'info' && this.earlyBirdOverTime >0) {
      this.downTime()

    }
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
} 
</script>

<style scoped lang="scss">
  .goods-item{
    width:710rpx;
    width: 100%;
    // height: 300rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    padding:0 0 20rpx;
    position: relative;
    .cover{
      width:100%;
      height:300rpx;
      background:#faa;
      display: block;
    }
    .info{
      position:absolute;
      top:260rpx;
      z-index: 999;
      color: #fff;
      padding: 0 20rpx;
      background-color: rgba(150,150,150,0.2);
    }
    .title{
      font-size: 32rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }
    
    .price{
      font-size: 40rpx;
      color: #f00;
      font-weight: 700;
    }
    .btn{
      background-color: rgb(239, 61, 17);
      color: #fff;
      padding: 10rpx 30rpx;
      border-radius: 20rpx;
      // width: 120rxpx;
    }
         &.info {
          margin-bottom: 0px;
          padding-bottom: 0px;
          border-radius: 0px;
            .main_info{
            padding: 10rpx 40rpx;

            .title{
              font-size: 38rpx;
              margin-top:20rpx;
            }
            .remark{
              font-size: 26rpx;
              color:#999;
            }
  }
         }
  }
  .main_info{
    width: 100%;
    padding: 10rpx 20rpx;
  }
  

 .zn{
  height:100rpx;
  width:100%;
  background-color: $mainColor;
  .le,.rt{
    width:50%;
    justify-content: center;
    height: 100%;
  }
  .btns{
    border: 1rpx solid #fff;
    color:#fff;
    font-size:20rpx;
    padding: 5rpx 10rpx;
    border-radius: 200rpx;
    margin-right: 10rpx;
  }
  .le{
    color:#fff;
  }
  .rt{
    background-color: #eaf4fe;
  }
 }
</style>